<template>
  <div class="companyInfo pageContent">
    <!-- <div style="margin-bottom:20px">
      <a-button type="primary" @click="onEdit()">编辑</a-button>
    </div>-->

    <div class="divPadding flexBetween">
      <div class="unitTitle" v-if="addPart1">江苏省交通工程集团有限公司</div>
      <div class="unitTitle" v-if="!addPart1">单位信息</div>
      <div v-if="addPart1">
        <a-dropdown-button>
          <a-menu slot="overlay" @click="handleUnit">
            <a-menu-item key="1">
              <a-icon type="edit" />编辑
            </a-menu-item>
            <a-menu-item key="2">
              <a-icon type="delete" />删除
            </a-menu-item>
          </a-menu>
        </a-dropdown-button>
      </div>
    </div>
    <!-- 表单 -->
    <div class="aform divPadding">
      <a-form-model
        ref="ruleForm"
        layout="inline"
        :model="formUnit"
        labelAlign="left"
        v-if="addPart1"
      >
        <a-form-model-item
          ref="code"
          label="统一社会信用代码"
          prop="code"
          style="width:30%"
        >{{formUnit.code}}</a-form-model-item>
        <a-form-model-item
          ref="engineering"
          label="工程专业"
          prop="engineering"
          style="width:30%"
        >{{formUnit.engineering}}</a-form-model-item>
        <a-form-model-item
          ref="price"
          label="工程造价（元）"
          prop="price"
          style="width:30%"
        >{{formUnit.price}}</a-form-model-item>
        <a-form-model-item
          ref="area"
          label="建设规模（km）"
          prop="area"
          style="width:30%"
        >{{formUnit.area}}</a-form-model-item>
        <a-form-model-item ref="time" label="开工时间" prop="time" style="width:30%">{{formUnit.time}}</a-form-model-item>
        <a-form-model-item
          ref="planTime"
          label="计划完工时间"
          prop="planTime"
          style="width:30%"
        >{{formUnit.planTime}}</a-form-model-item>
        <a-form-model-item
          ref="cycle"
          label="建设周期"
          prop="cycle"
          style="width:30%"
        >{{formUnit.cycle}}</a-form-model-item>

        <a-form-model-item ref="pr" label="项目经理" prop="pr" style="width:30%">{{formUnit.pr}}</a-form-model-item>

        <a-form-model-item
          ref="charge"
          label="劳资管理员"
          prop="charge"
          style="width:30%"
        >{{formUnit.charge}}</a-form-model-item>
      </a-form-model>
      <div v-if="!addPart1" style="text-align:center;padding:40px 0px">
        <div style="margin-bottom:10px">当前还没有填写单位信息</div>
        <div style="color:#1890ff;cursor: pointer;" @click="add1">点击添加</div>
      </div>
    </div>

    <div class="divPadding flexBetween">
      <div style="line-height: 100%;">合同信息</div>
      <div v-if="addPart2">
        <a-dropdown-button>
          <a-menu slot="overlay" @click="handleUnit">
            <a-menu-item key="3">
              <a-icon type="edit" />编辑
            </a-menu-item>
            <a-menu-item key="4">
              <a-icon type="delete" />删除
            </a-menu-item>
          </a-menu>
        </a-dropdown-button>
      </div>
    </div>
    <!-- 表单 -->
    <div class="contractform divPadding">
      <a-form-model v-if="addPart2" layout="inline" :model="formContract" labelAlign="left">
        <a-form-model-item ref="notice" label="中标通知书" style="width:30%">
          <span style="color:#1890ff;cursor: pointer;" @click="pdfModal()">{{formContract.notice}}</span>
        </a-form-model-item>
        <a-form-model-item ref="contract" label="施工合同" style="width:30%">
          <span style="color:#1890ff;cursor: pointer" @click="pdfModal()">{{formContract.contract}}</span>
        </a-form-model-item>
        <a-form-model-item ref="pay" label="支付担保合同" style="width:30%">
          <span style="color:#1890ff;cursor: pointer" @click="pdfModal()">{{formContract.pay}}</span>
        </a-form-model-item>
      </a-form-model>
      <div v-if="!addPart2" style="text-align:center;padding:20px 0px">
        <!-- <div style="margin-bottom:10px">当前还没有填写单位信息</div> -->
        <div style="color:#1890ff;cursor: pointer;" @click="add2">点击添加</div>
      </div>
    </div>
    <div class="divPadding flexBetween">
      <div style="line-height: 100%;">工资支付专户信息</div>
      <div v-if="addPart3">
        <a-dropdown-button>
          <a-menu slot="overlay" @click="handleUnit">
            <a-menu-item key="5">
              <a-icon type="edit" />编辑
            </a-menu-item>
            <a-menu-item key="6">
              <a-icon type="delete" />删除
            </a-menu-item>
          </a-menu>
        </a-dropdown-button>
      </div>
    </div>
    <!-- 表单 -->
    <div class="contractform divPadding">
      <a-form-model v-if="addPart3" layout="inline" :model="formWage" labelAlign="left">
        <a-form-model-item ref="bank" label="专户银行" style="width:30%">
          <span>{{formWage.bank}}</span>
        </a-form-model-item>
        <a-form-model-item ref="account" label="专户账号" style="width:30%">
          <span>{{formWage.account}}</span>
        </a-form-model-item>
        <a-form-model-item ref="voucher" label="开户凭证" style="width:30%">
          <span style="color:#1890ff;cursor: pointer" @click="pdfModal()">{{formWage.voucher}}</span>
        </a-form-model-item>
      </a-form-model>
      <div v-if="!addPart3" style="text-align:center;padding:20px 0px">
        <!-- <div style="margin-bottom:10px">当前还没有填写单位信息</div> -->
        <div style="color:#1890ff;cursor: pointer;" @click="add3">点击添加</div>
      </div>
    </div>
    <!-- 对话框 -->
    <div>
      <a-modal
        v-model="visible"
        :title="modalTitle"
        @ok="handleOk"
        :maskClosable="false"
        cancelText="取消"
        okText="确认"
      >
        <div v-if="isModalName=='编辑单位信息'||isModalName=='新增单位信息'">
          <a-form-model
            ref="ruleForm2"
            :model="formModal"
            v-if="visible"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-form-model-item ref="engineering" label="工程专业" prop="engineering">
              <a-select label-in-value v-model="formModal.engineering" placeholder="请选择">
                <a-select-option
                  v-for="(item,index) in engineering "
                  :key="index"
                  :value="item.key"
                >{{item.lable}}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item ref="name" label="单位名称" prop="name">
              <a-input v-model="formModal.name" :maxLength="30" placeholder="请输入单位名称" />
            </a-form-model-item>
            <a-form-model-item ref="code" label="统一社会信用代码" prop="code">
              <a-input v-model="formModal.code" :maxLength="30" placeholder="请输入统一社会信用代码" />
            </a-form-model-item>
            <a-form-model-item ref="price" label="工程造价" prop="price">
              <a-input v-model="formModal.price" :maxLength="30" placeholder="请输入工程造价（元）" />
            </a-form-model-item>
            <a-form-model-item ref="area" label="建设规模（km）" prop="area">
              <a-input v-model="formModal.area" :maxLength="30" placeholder="请输入建设规模（km）" />
            </a-form-model-item>
            <a-form-model-item ref="time" label="开工时间" prop="time">
              <a-date-picker v-model="formModal.time" type="date" style="width: 100%;" />
            </a-form-model-item>
            <a-form-model-item ref="plantime" label="计划完工时间" prop="plantime">
              <a-date-picker v-model="formModal.plantime" type="date" style="width: 100%;" />
            </a-form-model-item>
            <a-form-model-item ref="pr" label="项目经理" prop="pr">
              <a-input v-model="formModal.pr" :maxLength="30" placeholder="请输入项目经理姓名" />
            </a-form-model-item>
          </a-form-model>
        </div>
        <div v-if="isModalName=='编辑合同信息'||isModalName=='新增合同信息'">
          <a-form-model
            ref="ruleForm2"
            :model="formModal"
            v-if="visible"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-form-model-item label="中标通知书" prop="formUpload1">
              <a-upload
                name="file"
                accept=".pdf"
                :multiple="true"
                :remove="handleRemove"
                :before-upload="beforeUpload"
                :default-file-list="defaultFileList1"
              >
                <a-button>
                  <a-icon type="upload" @click="uploadName=='中标通知书'" />上传文件
                </a-button>
                <div style="color:#ccc">请上传pdf文件</div>
              </a-upload>
            </a-form-model-item>
            <a-form-model-item label="施工合同" prop="formUpload2">
              <a-upload
                name="file"
                accept=".pdf"
                :multiple="true"
                :remove="handleRemove"
                :before-upload="beforeUpload"
                :default-file-list="defaultFileList2"
              >
                <a-button>
                  <a-icon type="upload" @click="uploadName=='施工合同'" />上传文件
                </a-button>
                <div style="color:#ccc">请上传pdf文件</div>
              </a-upload>
            </a-form-model-item>
            <a-form-model-item label="支付担保合同" prop="formUpload3">
              <a-upload
                name="file"
                accept=".pdf"
                :multiple="true"
                :remove="handleRemove"
                :before-upload="beforeUpload"
                :default-file-list="defaultFileList3"
              >
                <a-button>
                  <a-icon type="upload" @click="uploadName=='支付担保合同'" />上传文件
                </a-button>
                <div style="color:#ccc">请上传pdf文件</div>
              </a-upload>
            </a-form-model-item>
          </a-form-model>
        </div>
        <div v-if="isModalName=='编辑工资支付专户信息'||isModalName=='新增工资支付专户信息'">
          <a-form-model
            ref="ruleForm2"
            :model="formModal"
            v-if="visible"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-form-model-item ref="name" label="工资专户银行" prop="name">
              <a-input v-model="formModal.name" :maxLength="30" placeholder="请输入工资专户银行" />
            </a-form-model-item>
            <a-form-model-item ref="code" label="专户账号" prop="code">
              <a-input v-model="formModal.code" :maxLength="30" placeholder="请输入专户账号" />
            </a-form-model-item>
            <a-form-model-item label="开户凭证" prop="formUpload2">
              <a-upload
                name="file"
                accept=".pdf"
                :multiple="true"
                :remove="handleRemove"
                :before-upload="beforeUpload"
                :default-file-list="defaultFileList2"
              >
                <a-button>
                  <a-icon type="upload" @click="uploadName=='开户凭证'" />上传文件
                </a-button>
                <div style="color:#ccc">请上传pdf文件</div>
              </a-upload>
            </a-form-model-item>
          </a-form-model>
        </div>
      </a-modal>
    </div>

    <!-- pdf对话框 -->
    <div>
      <a-modal
        v-model="visiblePdf"
        title
        @ok="handleOkPdf"
        :footer="null"
        :maskClosable="false"
        width="1080px"
        top="10px"
        :bodyStyle="{textAlign:'center'}"
        v-if="visiblePdf"
        key="modalpdf"
        class="pdfModal"
      >
        <embed width="1000" height="700" :src="this.pdfUrl" type />
      </a-modal>
    </div>

  </div>
</template>

<script>
import { uploadOSS } from '@/utils/oss.js'
import { message } from 'ant-design-vue'
import moment from 'moment'
export default {
  data() {
    return {
      labelCol: { span: 7 },
      wrapperCol: { span: 12 },
      formUnit: {
        engineering: '路面',
        code: '9192K322W2113I',
        price: '3221.21万元',
        area: '10.65km',
        time: '2018-03-01',
        planTime: '2021-03-01',
        cycle: '33月',
        pr: '张三',
        charge: '张三'
      },
      formContract: {
        notice: '中标通知书.pdf',
        contract: '施工合同.pdf',
        pay: '支付担保合同.pdf',
        fileInfoList1: [],
        fileInfoList2: [],
        fileInfoList3: []
      },
      defaultFileList3: [],
      defaultFileList2: [],
      defaultFileList1: [],
      formWage: {
        bank: '建设银行',
        account: '10383000000216268',
        voucher: '开户凭证.pdf'
      },
      formModal: {
        time: moment(new Date()),
        plantime: moment(new Date())
      },
      visible: false,
      engineering: [
        {
          key: 'load',
          lable: '路基'
        },
        {
          key: 'bridge',
          lable: '桥梁'
        }
      ],
      isModalName: '',
      modalTitle: '',
      uploadName: '',
      addPart1: false,
      addPart2: false,
      addPart3: false,
      visiblePdf: false,
      pdfUrl: ''
    }
  },
  methods: {
    moment,
    onEdit() {
      this.visible = true
    },
    handleOk() {
      this.visible = false

      switch (this.isModalName) {
        case '新增单位信息':
          this.addPart1 = true
          break
        case '新增合同信息':
          this.addPart2 = true
          break
        case '新增工资支付专户信息':
          this.addPart3 = true
          break
        default:
          break
      }
    },
    handleUnit(e) {
      // console.log(e);

      switch (parseInt(e.key)) {
        case 1:
          this.isModalName = '编辑单位信息'
          this.modalTitle = '编辑单位信息'
          this.visible = true
          break
        case 2:
          this.addPart1 = false
          break
        case 3:
          this.isModalName = '编辑合同信息'
          this.modalTitle = '编辑合同信息'
          this.visible = true
          break
        case 4:
          this.addPart2 = false
          break
        case 5:
          this.isModalName = '编辑工资支付专户信息'
          this.modalTitle = '编辑工资支付专户信息'
          this.visible = true
          break
        case 6:
          this.addPart3 = false
          break
        default:
          break
      }
    },
    handleRemove(file) {
      // console.log(file.uid)
      if (this.uploadName == '施工合同') {
        this.formContract.fileInfoList1.forEach((item, index) => {
          if (file.uid == item.uid) {
            this.formContract.fileInfoList1.splice(index, 1)
          }
        })
        // if (this.formContract.fileInfoList.length != 0) {
        //   this.iswageModal = true
        // } else {
        //   this.iswageModal = false
        // }
      } else if (this.uploadName == '中标通知书') {
        this.formContract.fileInfoList2.forEach((item, index) => {
          if (file.uid == item.uid) {
            this.formContract.fileInfoList2.splice(index, 1)
          }
        })
      } else if (this.uploadName == '支付担保合同') {
        this.formContract.fileInfoList3.forEach((item, index) => {
          if (file.uid == item.uid) {
            this.formContract.fileInfoList3.splice(index, 1)
          }
        })
      }
    },

    beforeUpload(file) {
      // console.log(file)
      const reader = new FileReader()
      reader.readAsDataURL(file) // 读取文件
      // if (this.modalTitle != '编辑凭证登记' && this.flag == true) {
      //   this.form.packageId = file.uid
      //   this.flag = false
      // }
      reader.onload = (data) => {
        //  console.log(file)
        this.uploadFile(data.target.result, file.name, file.uid, this.form.packageId)
      }
      // if (this.modalTitle == '凭证登记') {
      //   this.iswageModal = true
      // } else {
      //   this.isbankModal = true
      // }

      this.$message.success(`${file.name} 上传成功`, 1)
      return false
    },
    uploadFile(base64Data, fileName, fileUid, packageId) {
      let blob = this.dataURLtoBlob(base64Data)
      let dir = 'lw/' + 'DO' + packageId + '/'
      uploadOSS(blob, fileName, dir).then((fileUrl) => {
        let obj = { url: fileUrl, name: fileName, uid: fileUid, status: 'done' }
        if (this.uploadName == '中标通知书') {
          this.formContract.fileInfoList1.push(obj)
        } else if (this.uploadName == '施工合同') {
          this.formContract.fileInfoList2.push(obj)
        }
      })
    },
    dataURLtoBlob(dataurl) {
      var arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new Blob([u8arr], {
        type: mime
      })
    },
    add1() {
      this.isModalName = '新增单位信息'
      this.modalTitle = '新增单位信息'
      this.visible = true
    },
    add2() {
      this.isModalName = '新增合同信息'
      this.modalTitle = '新增合同信息'
      this.visible = true
    },
    add3() {
      this.isModalName = '新增工资支付专户信息'
      this.modalTitle = '新增工资支付专户信息'
      this.visible = true
    },
      pdfModal(value){
      // console.log(value);
      if(value){
        this.pdfUrl=value.url
      }
      else{
        this.pdfUrl='http://lw-sit.oss-cn-beijing.aliyuncs.com/lw/DO/1617241270460111.pdf'
      }
      this.visiblePdf = true
    },
    handleOkPdf() {
      this.visiblePdf = false
    },
  }
}
</script>

<style scoped lang='less'>
.companyInfo {
  font-family: Microsoft YaHei;
  font-weight: 400;
}
.divPadding {
  margin-bottom: 20px;
  font-size: 16px;
}
.unitTitle {
  color: #000;
  font-size: 26px;
  line-height: 100%;
}

.aform,
.contractform {
  width: 100%;
  background: #f5faff;
  padding: 10px 30px;
  min-height: 100px;
}
.contractform {
  background: #f5faff;
  min-height: 60px;
}
.flexBetween {
  align-items: center;
}
::v-deep .ant-btn-group > .ant-btn:first-child:not(:last-child) {
  display: none;
}
.pdfModal {
  ::v-deep .ant-modal {
    width: 1080px !important;
    top: 20px;
  }
}
.pdfModal ::v-deep .ant-modal-body {
  padding: 40px;
  text-align: center;
  height: 780px;
}
</style>